<template>
	<view>
		<view class="content-box">
			<view class="item" style="display:flex" :style="{justifyContent:userInfo._id!=item.user_id[0]['_id']?'flex-start':'flex-end'}"
				v-for="(item, index) in replyList" :key="index">
				<image style="width:30px;height:30px" v-if="userInfo._id!=item.user_id[0]['_id']"
					src="../../static/icon_0.svg"></image>
				<!-- 11111 -->
				<view>
					<view style="font-size: 28rpx;margin-bottom:10rpx" :style="{'textAlign':userInfo._id!=item.user_id[0]['_id']?'left':'right'}">{{item.user_id[0]['nickname']}}</view>
					<view :style="{background:userInfo._id!=item.user_id[0]['_id']?'#eee':'#68de7c'}"
						style="max-width:500rpx;background:#eee;padding:5px;border-radius: 5px;">{{item.content}}</view>
				</view>

				<image style="margin-left: 5px;width:30px;height:30px" v-if="userInfo._id==item.user_id[0]['_id']"
					src="../../static/icon_0.svg"></image>
			</view>
		</view>
		<view style="width: 100%; height: 110rpx;">

		</view>
		<view class="input-box">
			<uni-easyinput v-model="content" placeholder="请输入内容" />
			<button type="primary" @click="getContent(content)">发送</button>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	// const chat = uniCloud.importObject("ai-demo")
	export default {
		computed: {
			userInfo() {
				return store.userInfo
			},
		},
		data() {
			return {
				content: null,
				replyList: ['你好！很高兴见到你，有什么我可以帮助你的吗？'],
				setTime: null
			}
		},
		onLoad() {
			this.getList();
			this.setTime = setInterval(() => {
				this.getList();
			}, 1000)
		},
		onHide() {
			// alert(11)
			clearInterval(this.setTime);
			this.setTime = null;
		},
		onUnload() {
			// 清除定时器
			if (this.setTime) {
				clearInterval(this.setTime);
				this.setTime = null;
			}
		},
		methods: {
			getContent(e) {
				db.collection('lts').add({
					content: e
				}).then(res=>{
					this.content=''
				})
				//记得改下云函数的超时时间，一般20s,30s就行了
				// this.replyList.push(e)
				// this.content = null
				// chat.chatAi(e).then((res)=>{
				// 	this.replyList.push(res.reply)
				// }).catch(err=>{
				// 	console.log(err);
				// })
			},
			async getList() {
				let lts = db.collection('lts').getTemp();
				let user = db.collection('uni-id-users').field('_id,nickname').getTemp()
				let res = await db.collection(lts, user).limit(30).get();
				this.replyList = res.result.data;
				// console.log(res,'这是结果')

			}
		}
	}
</script>

<style lang="scss">
	.input-box {
		// @include flex($between);
		width: 100%;
		position: fixed;
		bottom: 10rpx;
	}

	.content-box {
		margin-top: 30rpx;

		.item {
			margin-top: 25rpx;
			margin-left: 30rpx;
			// @include flex();
			flex-wrap: nowrap;
			align-items: flex-start;

			image {
				width: 80rpx !important;
				height: 80rpx !important;
				border-radius: 50rpx;
				margin-right: 15rpx;
			}

			.iText {
				max-width: 500rpx;
				border-radius: 30rpx;
				padding: 10rpx 30rpx;
				background-color: #eee;
			}

			&:nth-child(even) {
				// justify-content: flex-end;
			}
		}
	}
</style>